<template>
    <el-dialog class="setServerTime" :title="title" :visible.sync="isDial" width="1100px" :before-close="closeDialog">
        <div class="info">
            <div v-if="title=='更改服务时间'">
                <span>服务时间：{{tabelRow.getHomeDate +'  '+ tabelRow.serviceTime}}</span>
                <span>原服务管家：{{tabelRow.adminName}}</span>
            </div>
            <div v-if="title=='分配管家'">
                <span>业主收房日期:</span><span class="red">{{tabelRow.getHomeDate}}  {{tabelRow.getHomeTime}}</span>
                <el-button type="text" size="small" @click="setTime(tabelRow.getHomeDate)">[更改]</el-button><span style="margin-left:10px;">{{selTime}}</span>
            </div>
            <div style='float:right;height:60px;overflow:hidden;margin-top:-30px'  v-if="title=='更改服务时间'">
                <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline">
                    <el-form-item prop="time" label="更改时间">
                        <el-date-picker v-model="formInline.time" :picker-options="pickerOptions0" size='mini' style="width:180px;" type="date" placeholder="选择日期" format="yyyy 年 MM 月 dd 日" value-format="yyyy-MM-dd"></el-date-picker>
                    </el-form-item>
                    <el-form-item>
                        <el-button size="mini" type="primary" plain @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </div>
        <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="全职管家" name="1"></el-tab-pane>
            <el-tab-pane label="兼职管家" name="0"></el-tab-pane>
        </el-tabs>
        <div class="address">
            <span style="margin-right: 15px;">{{tabelRow.address}}</span><span>需{{tabelRow.serviceTimes}}分钟</span>
            <!-- <div style="float:right;color:#cc6633"><div class="sekuai"></div><span>已接单</span></div> -->
        </div>
        <el-table :data="gridData" border size='mini'  max-height="400">
            <el-table-column property="realName" label="管家" width="80"></el-table-column>
            <el-table-column property="serviceAreaName" label="区域" width="80"></el-table-column>
            <el-table-column property="listAdminWorkVo" label="选择时间">
                <template slot-scope="scope">
                    <el-checkbox-group v-model="scope.row.checkList" >
                        <span v-if='item.status==1 || item.status==2' v-for='item in scope.row.listAdminWorkVo' class="spsp">
                            <el-tooltip  effect="dark" size='mini' :content="item.orderJson" placement="bottom-start" >
                                <el-checkbox :label="item.times" style="color:#cc6633" @change="aa(item,scope.row)" :disabled="item.status==1 || item.status==2? true : false" v-model="item.status==1 || item.status==2? true : false"></el-checkbox>
                            </el-tooltip>
                        </span>
                        <span v-else  class="spsp">
                             <el-checkbox :label="item.times" @change="aa(item,scope.row)" :disabled="item.status==1? true : false" v-model="item.status==1? true : false"></el-checkbox>
                        </span>
                    </el-checkbox-group>
                </template>
            </el-table-column>
        </el-table>
        <div slot="footer" class="dialog-footer">
            <el-button size="mini" type="primary" @click="saveTime">保 存</el-button>
        </div>
    </el-dialog>
</template>
<script>
import { request } from "../../assets/request.js";
export default {
    data(){
        return{
            gridData:[], //表格
            formInline:{
                time:''
            },
            isDial: false,
            activeName:'1',
            title:'更改服务时间',
            tabelRow:'',
            row:'',
            date:'',
            selTime:'',
            pickerOptions0: {
                disabledDate(time) {
                    return time.getTime() < Date.now() - 8.64e7;
                }
            },
            type:'',
        }
    },
    created(){
        let that=this 
        this.$root.$on('setServerTime',(type,data)=>{
            that.gridData=[];
            this.isDial=true;
            let formInline=that.formInline
            formInline.time=data.getHomeDate
            that.formInline=formInline
            that.date=data.getHomeDate
            console.log(data)
            this.type=type
            if(type=='edit' || type=='editAll'){  //判断是否是 派单  （订单页面和订单统一分配）
                this.title='更改服务时间'
                
            }else if(type=='add' || type=='setEdit'){  //判断是否是 修改
                this.title='分配管家'
            }
            if(data.fullName){
                data.address=data.fullName
            }
            that.tabelRow=data
            that.selectAdmin()
        })
        this.$root.$on('saveTime',(time)=>{  //服务时间改变弹层确定后返回的数据
            let formInline=that.formInline
            formInline.time=time
            that.selTime=time
            this.onSubmit()
        })
    },
    methods:{
        closeDialog(){ //关闭弹层
            this.selTime=''
            this.isDial=false
        },
        handleClick(tab) { //tab切换   全职和兼职管家
            this.activeName=tab.name
            this.onSubmit()
        },
        saveTime(){  //保存时间
            if(this.row==''){  //提示是否有选时间和管家
                this.$message({
                    type: "info",
                    message: "请先选择管家与时间"
                });
                return
            }
            let that=this
            let tabelRow=that.tabelRow
            let row=that.row
            let url='order/distribution'
            let time=row.checkList[0].split('~')
            let formInline=this.formInline
            let params={
                adminId: row.adminId,
                date: formInline.time,
                endTime: time[1],
                orderId: tabelRow.id,
                startTime: time[0]
            }
            let mat='POST'
            if(this.title=='更改服务时间'){ //判断是否是  第一次派单
                mat='PUT'
            }
            request.ajaxPost({
                url,
                that,
                type:mat,
                params,
                fn(res) {
                    that.isDial = false;
                    that.selTime=''
                    if(that.type=='add' || that.type=='edit'){   //服务订单列表刷新
                        that.$root.$emit("searchOrder",'no')
                    }
                    // that.$root.$emit("page",'no')
                    if(that.type=='setEdit' || that.type=='editAll'){
                        that.$root.$emit("orderAllList",'set')    //订单统一分配  列表
                    }
                }
            });
        },
        setTime(data){ //设置时间
            this.$root.$emit('setTime',data)
        },
        onSubmit(){ //更改时间查询
            let url='order/work/times/date'
            let that=this
            //更改时间后的时间
            let formInline=that.formInline
            let time=that.tabelRow
            // console.log(formInline)
            let obj={
                date:formInline.time,
                time:time.serviceTimes,
                isFullTime:parseInt(that.activeName),
                orderId:time.id
            }
            request.ajaxGet({
                url,
                that,
                params:obj,
                fn(res){
                    for(let i in res){
                        res[i].checkList=[]
                    }
                    that.gridData=res
                }
            })
        },
        selectAdmin(){ //查询管家
            let that=this
            let url = "order/work/times";
            let data=that.tabelRow
            let obj={
                orderId:data.id,
                isFullTime:parseInt(this.activeName)
            }
            that.tabelRow=data
            request.ajaxGet({
                url,
                that,
                params:obj,
                fn(res){
                    for(let i in res){
                        res[i].checkList=[]
                    }
                    // console.log(res)
                    that.gridData=res
                }
            })
        },
        aa(a,row){
            let gridData=this.gridData
            for(let i in gridData){
                gridData[i].checkList=[]
            }
            for(let i in gridData){
                if(row.adminId==gridData[i].adminId){
                    gridData[i].checkList[0]=a.times
                }
            }
            this.row=row
            this.gridData=gridData
        }
    }
}
</script>

<style lang="less" scoped>
.setServerTime{
    text-align: left;
    .spsp{
        margin: 0 10px;
    }
    .el-checkbox+.el-checkbox{
        margin-left: 0px;
        margin: 0 15px;
    }
    .info{
        background: #f5f5f5;
        margin-top: -20px;
        margin-bottom: 10px;
        margin-left: -20px;
        width: 100%;
        padding: 20px 20px;
        border-top: 1px solid #eeeeee;
        overflow: hidden;
        height: 20px;
        line-height: 20px;
        span{
            margin-right: 15px;
        }
        .red{
            color: #FF0000;
            font-weight: 600;
        }
    }
    .address{
        width: 100%;
        padding: 10px 0px;
        .sekuai{
            padding:6px;
            border-radius: 2px;
            margin-right: 5px;
            margin-top: 1px;
            float: left; 
            background: #cc6633;
            
        }
    }
    
}
</style>
